<template>
  <div class="modal-form">
    <el-form
      :model="formDataObject"
      ref="formData"
      label-width="120px"
      :class="isFlex ? 'modal-form-flex' : 'modal-form'"
    >
      <div
        :class="isFlex ? 'modal-form-flex-item' : 'modal-form-item'"
        v-for="(item, index) in formData"
        :key="index"
      >
        <el-form-item :label="item.label" :prop="item.name" :rules="item.rule">
          <div v-if="item.type === 'input'">
            <el-input v-model="formDataObject[item.name]"></el-input>
          </div>
          <div v-else-if="item.type === 'text-area'">
            <el-input type="textarea" v-model="formDataObject[item.name]">
            </el-input>
          </div>
          <div v-else-if="item.type === 'input-number'">
            <el-input-number
              v-model="formDataObject[item.name]"
            ></el-input-number>
          </div>

          <div v-else-if="item.type === 'input-password'">
            <el-input
              show-password
              v-model="formDataObject[item.name]"
            ></el-input>
          </div>
          <div v-else-if="item.type === 'select'">
            <el-select
              :multiple="item.multiple || false"
              :collapse-tags="item.multiple || false"
              v-model="formDataObject[item.name]"
              placeholder="请选择"
            >
              <el-option
                v-for="item in item.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div v-else-if="item.type === 'more-select'">
            <el-cascader
              v-model="formDataObject[item.name]"
              :options="cityList"
            ></el-cascader>
          </div>
          <div v-else-if="item.type === 'upload'">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.2.22:8282/petHospital/img-up/uploadFile"
              :show-file-list="false"
              :on-change="handleChange(item.name)"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="imageUrl || item.value"
                :src="imageUrl || item.value"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div v-else-if="item.type === 'date-picker'">
            <el-date-picker
              v-model="formDataObject[item.name]"
              value-format="yyyy-MM-DD hh:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div v-else-if="item.type === 'date-select'">
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="formDataObject[item.name]"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div v-else-if="item.type === 'radio'">
            <el-radio-group v-model="formDataObject[item.name]">
              <el-radio
                v-for="(item, index) in item.options"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { MapList } from "@/utils/map";
export default {
  name: "modal-form",
  components: {},
  data() {
    return {
      formDataObject: {},
      cityList: [],
      imageUrl: "",
    };
  },
  props: {
    formData: {
      type: Array,
      default: undefined,
    },
    isFlex: {
      type: Boolean,
      default: undefined,
    },
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler() {
        const objValue = {};
        this.$props.formData.forEach((item) => {
          if (item.value === 0) {
            objValue[item.name] = item.value;
          } else {
            objValue[item.name] = item.value || undefined;
          }
        });
        this.formDataObject = { ...objValue };
      },
    },
  },
  mounted() {
    this.useMap();
  },
  methods: {
    /**
     * 地址位置
     */
    useMap() {
      this.cityList = MapList();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = file.response;
    },
    handleChange(name) {
      if (this.imageUrl) {
        this.formDataObject[name] = this.imageUrl;
      }
    },

    //校验成功则方法自动返回true，校验方法报错则说明校验失败，返回false
    async justify() {
      try {
        return await this.$refs["formData"].validate();
      } catch (error) {
        return false;
      }
    },
    async remove() {
      try {
        return await this.$refs["formData"].resetFields();
      } catch (error) {
        return;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.modal-form-flex {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-wrap: wrap;
  .modal-form-flex-item {
    width: 50%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.modal-form {
  .modal-form-item {
    width: 100%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
